<template>
  <el-card shadow="never" class="statement-header-box">
    <p>活动名称：{{ info.activity_name || '--' }}</p>
    <p>创建人：{{ info.created_uid_name || '--' }}</p>
    <p>创建时间：{{ info.created_at || '--' }}</p>
    <p v-if="info.period_type == 1">有效期：永久</p>
    <p v-else> 创建有效期：{{ info?.effect_time ? info?.effect_time[0] : '--' }} ~ {{ info?.effect_time ? info?.effect_time[1] : '--' }} </p>
    <p>
      状态：<span :style="{ color: StatusColor(info.status) }">
        <span v-if="info.status == 1">未开始</span>
        <span v-if="info.status == 2">进行中</span>
        <span v-if="info.status == 3">已结束</span>
        <span v-if="info.status == 4">提前结束</span>
      </span>
    </p>
    <div v-if="info.activity_status == 4">提前结束时间：{{ info.early_end_time }}</div>
  </el-card>
</template>
<script setup lang="ts">
  import { withDefaults, defineProps, watch } from 'vue'
  import { StatusColor } from '@/utils/smartMarketing'
  interface Props {
    info: any
  }
  withDefaults(defineProps<Props>(), {
    info: () => {
      return {
        activity_name: '',
        created_uid_name: '',
        activity_status: '',
        period_type: 1,
        begin_date: '',
        end_date: '',
        created_at: '',
        real_end_date: ''
      }
    }
  })
</script>
<style lang="scss" scoped>
  .statement-header-box {
    font-size: 14px;
    line-height: 16px;
    font-weight: 500;
    color: #33302d;
    margin-bottom: 16px;
    :deep .el-card__body {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
